<template>
  <footer>
    <div class="left">
      <div class="top">
        <div class="title">
          <div>告警事件</div>
          <div><svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" /></div>
        </div>
        <div class="wrap">
          <div class="item">
            <div class="value">{{ leftData.alarmAll.confirmed }}</div>
            <div style="color: #ffffff">已确认</div>
          </div>
          <div class="item">
            <div class="value" style="color: #F53028">{{ leftData.alarmAll.unconfirmed }}</div>
            <div style="color: #ffffff">未确认</div>
          </div>
        </div>
        <div class="list">
          <vue-seamless-scroll
            :data="alarmList"
            :class-option="optionHover"
          >
            <div v-for="(item,index) in alarmList" :key="index" style="border-bottom: 1px dashed #1ACACC;margin-bottom: 5px;">
              <div :title="item.event_desc" :class="{detail: true, exigency: item.alarm_level == 3 ? true : false}">【{{ item.group_type_id == 1 ? item.group_name : item.device_name }}】 {{ item.event_desc }}</div>
              <div class="time">{{ item.updated_at }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="center">
        <div class="title">
          <div>告警类型</div>
          <div><svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" /></div>
        </div>
        <div class="wrap">
          <div class="item">
            <div class="value" style="color: #F53028">{{ leftData.unconfirmed.yx }}</div>
            <div style="color: #ffffff">已确认</div>
          </div>
          <div class="item">
            <div class="value" style="color: #F53028">{{ leftData.unconfirmed.yc }}</div>
            <div style="color: #ffffff">未确认</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title">
          <div>通讯状态</div>
          <div><svg-icon icon-class="today0" class="todays" style="font-size: 3vh;margin-right: 10px" /></div>
        </div>
        <div class="wrap">
          <div class="item">
            <div class="value">{{ leftData.channelState.normal + leftData.channelState.abnormal || 0 }} <span style="color: #F53028;font-family: 'none'">({{ leftData.channelState.abnormal }})</span></div>
            <div style="color: #ffffff">网关</div>
          </div>
          <div class="item">
            <div class="value">{{ leftData.deviceState.normal + leftData.deviceState.abnormal || 0 }} <span style="color: #F53028;font-family: 'none'">({{ leftData.deviceState.abnormal }})</span></div>
            <div style="color: #ffffff">设备</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="modelDom" id="content" class="right" v-html="modelDom" />
  </footer>
</template>

<script>
import * as d3 from 'd3'
import { mapGetters } from 'vuex'
import { getModelEnv } from '@/api/dataScreen'
export default {
  props: {
    modelDom: {
      type: String,
      default: ''
    },
    leftData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      alarmList: [],
      ycIds: [],
      yxIds: [],
      svgtiemr: null
    }
  },
  computed: {
    ...mapGetters([
      'stationId',
      'wiring'
    ]),
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  watch: {
    modelDom() {
      // this.getModelEnv
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.alarmList = this.leftData.alarmList
      const svg = d3.select('#content svg')
      svg._groups[0][0].setAttribute('height', '100%')
      svg._groups[0][0].setAttribute('width', '100%')
      svg.call(
        d3.zoom().scaleExtent([0.1, 5]).on('zoom', zoom)
      )
      function zoom() {
        d3.select(this).select('g').attr('transform', d3.zoomTransform(svg.node()))
      }
      this.initSvg()
    })
  },
  beforeDestroy() {
    // 清除定时器
    clearTimeout(this.svgtiemr)
  },
  methods: {
    initSvg() {
      const svg = document.querySelector('#content svg g').children
      svg.forEach(item => {
        const el1 = item.getAttribute('data-id')
        if (el1) {
          const pointIndex = el1.slice(3)
          const type = el1.slice(0, 2)
          if (type === 'yc' && pointIndex !== '') {
            this.ycIds.push(pointIndex)
          }
          if (type === 'yx' && pointIndex !== '') {
            this.yxIds.push(pointIndex)
          }
        }
      })
      this.getModelEnv()
    },
    getModelEnv() {
      if (this.svgtiemr) {
        clearTimeout(this.svgtiemr)
      }
      const option = {
        stationId: this.stationId,
        ycIds: this.ycIds.join(','),
        yxIds: this.yxIds.join(',')
      }
      getModelEnv(option).then(res => {
        const { data } = res
        // console.log(data)
        if (data.yc) {
          const key = Object.keys(data.yc)
          const arr = []
          for (const i in data.yc) {
            arr.push(data.yc[i])
          }
          key.forEach((item, index) => {
            arr.forEach((arrItem, arrindex) => {
              if (index === arrindex) {
                document.querySelector(`text[data-id='yc_${item}']`).innerHTML = arrItem
              }
            })
          })
        }
        if (data.yx.length !== 0) {
          let key = []; const arr = []
          let el, img1, img2
          for (const i in data.yx) {
            arr.push(data.yx[i])
          }
          key = Object.keys(data.yx)
          key.forEach((item, index) => {
            arr.forEach((arrItem, arrIndex) => {
              if (index === arrIndex) {
                el = document.querySelector(`text[data-id='yx_${item}']`)
                if (el) {
                  el.innerHTML = arrItem
                } else {
                  el = document.querySelector(`image[data-id='yx_${item}']`)
                  img1 = el.getAttribute('data-img-1')
                  img2 = el.getAttribute('data-img-2')
                  if (arrItem === '分位') {
                    el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img1)
                  } else if (arrItem === '合位') {
                    el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img2)
                  }
                }
              }
            })
          })
        }
      })
      this.svgtiemr = setTimeout(() => {
        this.getModelEnv()
      }, 5000)
    }
  }
}
</script>

<style lang="scss" scoped>
footer {
    height: 79%;
    display: flex;
    .left {
        width: 17%;
        > div {
            padding: 2vh;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                // border: 1px solid #000;
                font-size: 22px;
                color: #7CDAFA;
            }
            .wrap {
                display: flex;
                align-items: center;
                .item {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .value {
                        font-size: 3vh;
                        font-family: 'bigfont1';
                        color: #e7ffff;
                        text-shadow: 0 0 0.5em #078792, 0 0 0.5em #078792;
                        margin-bottom: 1vh
                    }
                }
            }
        }
        .top {
            height: 50%;
            background: url('../../../assets/leftBg1.png') no-repeat;
            background-size: 100% 100%;
            .title {
                height: 10%;
            }
            .wrap {
                height: 23%;
            }
            .list {
                height: 67%;
                padding-top: 10px;
                overflow: hidden;
                .detail {
                    color: #edf0f7;
                    padding: 0.2vw;
                    border-radius: 10px;
                    font-size: 1vh;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .exigency  {
                    background: linear-gradient(90deg,#a8aa11 0%,rgba(22, 212, 196, 0) 100%);
                }
                .warm  {
                    background: linear-gradient(90deg,#f53028 0%,rgba(22, 212, 196, 0) 100%);
                }
                .time {
                    color: #EDF0F7;
                    padding: .2vw;
                    font-size: 13px;
                }
            }
        }
        .center {
            height: 25%;
            background: url('../../../assets/leftBg2.png') no-repeat;
            background-size: 100% 100%;
            .title {
                height: 25%;
            }
            .wrap {
                height: 75%;
            }
        }
        .bottom {
            height: 25%;
            background: url('../../../assets/leftBg2.png') no-repeat;
            background-size: 100% 100%;
            .title {
                height: 25%;
            }
            .wrap {
                height: 75%;
            }
        }
    }
    .right {
        width: 83%;
        background: url('../../../assets/rightBg.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>
